import React from "react";
import Link from "next/link";
import { Icon } from "antd";

import style from "./index.module.scss";
import { useRouter } from "next/router";

export const Categories = ({ categorys = [] }) => {
  const router = useRouter();
  const { category: param } = router.query;
  return (
    <div className={style.wrapper}>
      <div className={style.head}>
        <Icon type="appstore" />
        <span>分类</span>
      </div>
      <ul className={style.list}>
        {categorys.map((item) => (
          <li
            key={item.id}
            className={param === item.value ? style.active : null}
          >
            <Link href={`/[category]`} as={`/${item.value}`}>
              <a>
                <span>{item.label}</span>
                <span>共 {item.articleCount} 文章</span>
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};
